<template>
  <div class="service-panel">
    <!-- 关闭按钮 -->
    <span class="close iconfont icon-guanbi" @click="emit('close')"></span>
    <!-- 标题 -->
    <div class="title">服务说明</div>
    <!-- 内容 -->
    <div class="content">
      <div class="item">
        <div class="dt">无忧退货</div>
        <div class="dd">
          自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
        </div>
      </div>
      <div class="item">
        <div class="dt">快速退款</div>
        <div class="dd">
          收到退货包裹并确认无误后，将在48小时内办理退款，
          退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
        </div>
      </div>
      <div class="item">
        <div class="dt">满88元免邮费</div>
        <div class="dd">
          单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['close'])
</script>

<style lang="scss">
.service-panel {
  padding: 0 15px;
  border-radius: 5px 5px 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 25px;
}

.content {
  padding: 10px 10px 50px 10px;

  .item {
    margin-top: 10px;
  }

  .dt {
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    position: relative;

    &::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #eaeaea;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: -10px;
    }
  }

  .dd {
    line-height: 1.6;
    font-size: 13px;
    color: #999;
  }
}
</style>